import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Input, Button, Modal, message, Upload } from 'antd';
import { NavBar, Cell } from 'react-vant';
import { Outlet, useNavigate } from 'react-router-dom';
import { ImageUploader, Popup, Space, Toast, Dialog } from 'antd-mobile'
import { demoSrc, mockUpload } from './utils'
import { RightOutlined, PlusOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons';
// import { useDropzone } from 'react-dropzone';
// import axios from '../../utils/Index'
import axios from 'axios';
const { TextArea } = Input;
export default function Public() {
  const navigate = useNavigate()
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const [value, setValue] = useState('')
  const [value1, setValue1] = useState('')
  const [checkall, setCheckall] = useState(false)
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  const [fileList, setFileList] = useState([]);





  const items = [
    {
      key: '1',
      label: (
        <div>
          <p>已售出</p>
          <p>未售出</p>
        </div>

      ),
    },

  ];
  const publicBook = async () => {
    const { data } = await axios.post('http://127.0.0.1:3000/lmy/add', {
      title: value,
      content: value1,
      img: previewImage,
      type: '已售出',
      price: price
    })
    if(data.code==200){
      message.success('添加成功')
      navigate('/')
    }
    // console.log(data);
  }
  // 全选
  // const handleSelectAll = (checked) => {
  //   // console.log(checked);
  //   setCheckall(checked)
  //   // const allChecked=imglist.every(item=>item.status==true)
  //   // console.log(allChecked);
  //   const updateImgList = imglist.map(item => ({ ...item, status: !checkall }))
  //   // console.log(updateImgList);
  //   setImglist(updateImgList)
  // }
  // 选择一张或多张图片
  // const handleChecked = (id) => {
  //   console.log(id);
  //   const updateImgList1 = imglist.map(item => {
  //     if (item.id == id) {
  //       return { ...item, status: !item.status }
  //     } else {
  //       return item;
  //     }
  //   })
  //   setImglist(updateImgList1)
  // }
  // 筛选条件，用来判断完成按钮是禁用还是不禁用
  // const newlist = imglist.filter(item => item.status == true)


  //点击文件链接或预览图标时的回调
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };
  const handleCancel = () => setPreviewOpen(false);
  // 上传文件改变时的回调
  const handleChange = ({ fileList: newFileList }) => {setFileList(newFileList)};
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );
  return (
    <div style={{ height: '100vh' }}>
      <NavBar
        title="发布"
        leftText=""
        rightText={<MoreOutlined style={{ fontSize: '20px' }} />}
        onClickLeft={() => { navigate(-1) }}
        onClickRight={() => Toast('按钮')}

      />

      <Input placeholder="添加宝贝标题" allowClear 
      style={{width:'96%',margin:'10px 2%',borderRadius:'10px',height:'80px'}}
      value={value} onChange={(e) => {
        // console.log(e.target.value);
        setValue(e.target.value)

      }} />
      <br />
      <br />
      <TextArea placeholder="描述型号、入手渠道、转手原因..." allowClear autoSize 
      style={{width:'96%',margin:'10px 2%',borderRadius:'10px',minHeight:'100px'}}
      value={value1} onChange={(e) => {

        setValue1(e.target.value)
      }} />

      <div style={{ marginTop: '20px', height: '200px' ,marginLeft:'10px'}}>
        <Upload
          action="http://127.0.0.1:3000/lmy/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={handlePreview}
          onChange={handleChange}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
          <img
            alt="example"
            style={{
              width: '100%',
            }}
            src={previewImage}
          />
        </Modal>
      </div>

      <div style={{ position: 'relavite', width: '100px', color: '#000', top: '300px',marginLeft:'10px', fontSize: '20px' }}>
        <span>书本状况</span>
        <span style={{ position: 'absolute', right: '10px' }}>
          {flag == true ? <RightOutlined onClick={() => { setFlag(false) }} /> : <DownOutlined onClick={() => { setFlag(true) }} />}
        </span>
        {
          flag == false ? <div style={{
            fontSize:'18px',
            marginTop:'10px',
            marginLeft:'10px'
          }}>
            <p style={{marginBottom:'10px'}} >已售出</p>
            <p>未售出</p>
          </div> : ""
        }
      </div>

      <div style={{ position: 'relavite', width: '100%', color: '#000', top: '320px' ,display:'flex',marginLeft:'10px',marginTop:'20px',fontSize:'20px'}}>
        <p>
          价格：
        </p>
        <input type="text" style={{border:'none'}} value={price} onChange={(e)=>{
          setPrice(e.target.value)
        }}/>
      </div>
      <br />
      <Button style={{
        position: 'absolute',
        bottom: '30px',
        width: '100%',
        height: '50px',
        background: 'green',
        color: 'white',
        fontSize: '20px',
      }} onClick={() => {
        publicBook()
      }}>确认发布</Button>
    </div>
  )
}
